<template>
  <div class="echart"></div>
</template>

<script lang="ts" setup>
import { onMounted, inject, nextTick, onUnmounted } from "vue"; //主要
let echarts: any = inject("echarts");
let rkkchart: any = "";
var debounce = function (
  func: { apply: (arg0: any, arg1: IArguments) => void },
  threshold: any,
  execAsap: any
) {
  var timeout: string | number | NodeJS.Timeout | null | undefined;
  return function debounced(this: any) {
    var obj = this,
      args = arguments;
    function delayed() {
      if (!execAsap) func.apply(obj, args);
      timeout = null;
    }
    if (timeout) clearTimeout(timeout);
    else if (execAsap) func.apply(obj, args);
    timeout = setTimeout(delayed, threshold || 100);
  };
};
onMounted(() => {
  rkkchart = echarts.init(document.querySelector(".echart"));
  initEcharts(rkkchart);
  window.addEventListener("resize", renderEcharts);
});
const renderEcharts = () => {
  debounce(rkkchart.resize(), 100, true);
};
onUnmounted(() => {
  window.removeEventListener("resize", renderEcharts);
});
//初始化图表
function initEcharts(rkkchart: any) {
  // var rkkchart = echarts.init(document.querySelector(".echart"));
  var xData = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日",
  ];
  xData.reverse();
  var lastYearData = [20, 86, 52, 10, 120, 45, 1000];
  var thisYearData = [40, 11, 45, 11, 25, 55, 120];

  var option = {
    baseOption: {
      tooltip: {
        show: false,
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        top: "0%",
        right: "center",
        icon: "horizontal",
        textStyle: {
          color: "#ffffff",
          fontSize: 16,
        },
        data: ["上周", "本周"],
      },
      grid: [
        {
          show: false,
          left: "10%",
          top: "10%",
          bottom: "10%",
          width: "30%",
        },
        {
          show: false,
          right: "10%",
          top: "10%",
          bottom: "10%",
          width: "30%",
        },
        {
          show: false,
          left: "50%",
          top: "10%",
          bottom: "10%",
        },
      ],
      xAxis: [
        {
          type: "value",
          inverse: true, //反向坐标
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 2,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          position: "left",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: xData,
        },
        {
          gridIndex: 1,
          type: "category",
          position: "left",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 0,
          },
          data: xData,
        },
        {
          gridIndex: 2,
          type: "category",
          position: "left",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            align: "center",
            margin: 0,
          },
          data: xData,
        },
      ],
      series: [
        {
          name: "上周",
          type: "bar",
          barWidth: 20,
          stack: "1",
          itemStyle: {
            borderRadius: [8, 0, 0, 8],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#188df0" },
              { offset: 0.2, color: "#188df0" },
              { offset: 1, color: "#fff" },
            ]),
          },
          label: {
            show: true,
            position: "left",
            fontSize: 10,
            color: "#fff",
          },
          data: lastYearData,
        },
        {
          name: "本周",
          type: "bar",
          barWidth: 20,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            borderRadius: [0, 8, 8, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#fff" },
              { offset: 0.8, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
          },
          label: {
            show: true,
            position: "right",
            fontSize: 10,
            color: "#fff",
          },
          data: thisYearData,
        },
      ],
    },
  };
  rkkchart.setOption(option);
}
</script>

<style lang="scss" scoped>
.echart {
  height: 100%;
}
</style>
